<template>
	<div class="back-container" @click="goTop" :style="{ right: right + 'px', bottom: bottom + 'px' }" v-show="isShow">
		<span></span>
	</div>
</template>

<script>
export default {
	props: {
		right: {
			type: [Number, String],
			default: '40',
		},
		bottom: {
			type: [Number, String],
			default: '40',
		},
		visibilityHeight: {
			type: [Number, String],
			default: 300,
		},
	},
	data() {
		return {
			isShow: false,
		}
	},
	methods: {
		goTop() {
			document.documentElement.scrollTop = document.body.scrollTop = 0
		},
		scrollHandler() {
			// 获取网页卷上去的高度
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			if (scrollTop > this.visibilityHeight) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
	},
	mounted() {
		// 给文档绑定滚动事件
		document.addEventListener('scroll', this.scrollHandler)
	},
	beforeDestroy() {
		document.removeEventListener('scroll', this.scrollHandler)
	},
}
</script>

<style lang="scss">
html,
body {
	scroll-behavior: smooth;
}

.back-container {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	//   bottom: 40px;
	//   right: 40px;
	width: 40px;
	height: 40px;
	background-color: rgb(241 246 247);
	border-radius: 50%;

	span {
		width: 0;
		height: 0;
		border-right: 10px solid transparent;
		border-bottom: 10px solid skyblue;
		border-left: 10px solid transparent;
	}
}
</style>
